<template>
    <div class="light_box">
        <div class="light_header">
            <img src="../assets/image/light_bg.png" class="light_bg">
        </div>
        <div class="light_content">
            <mu-container class="light_con" fluid>
                <mu-row gutter>
                    <mu-col span="4" sm="4" md="4" lg="4">
                        <mu-row>
                            <mu-col span="10" sm="10" md="10" lg="10" class="light_con_list">
                                <div class="light_info dd-clearfix">
                                    <span class="dd-fl">照明一</span>
                                    <mu-checkbox v-model="checkbox.value2" uncheck-icon="power_settings_new" class="dd-fr open" checked-icon="power_settings_new"></mu-checkbox>
                                </div>
                                <mu-slider class="demo-slider" :step="1" :max="6" v-model="normal.value2"></mu-slider>
                                <div class="gear dd-clearfix">
                                    <span class="dd-fl">0档</span>
                                    <span class="dd-fr">6档</span>
                                </div>  
                            </mu-col>
                            <mu-col span="10" sm="10" md="10" lg="10" class="light_con_list">
                                <div class="light_info dd-clearfix">
                                    <span class="dd-fl">照明二</span>
                                    <mu-checkbox v-model="checkbox.value3" uncheck-icon="power_settings_new" class="dd-fr open" checked-icon="power_settings_new"></mu-checkbox>
                                </div>
                                <mu-slider class="demo-slider" :step="1" :max="6" v-model="normal.value3"></mu-slider>
                                <div class="gear dd-clearfix">
                                    <span class="dd-fl">0档</span>
                                    <span class="dd-fr">6档</span>
                                </div>  
                            </mu-col>
                            <mu-col span="10" sm="10" md="10" lg="10" class="light_con_list">
                                <div class="light_info dd-clearfix">
                                    <span class="dd-fl">照明三</span>
                                    <mu-checkbox v-model="checkbox.value4" uncheck-icon="power_settings_new" class="dd-fr open" checked-icon="power_settings_new"></mu-checkbox>
                                </div>
                                <mu-slider class="demo-slider" :step="1" :max="6" v-model="normal.value4"></mu-slider>
                                <div class="gear dd-clearfix">
                                    <span class="dd-fl">0档</span>
                                    <span class="dd-fr">6档</span>
                                </div>  
                            </mu-col>
                        </mu-row>
                    </mu-col>
                    <mu-col span="4" sm="4" md="4" lg="4">
                        <mu-row>
                            <mu-col span="10" sm="10" md="10" lg="10" class="light_con_list">
                                <div class="light_info dd-clearfix">
                                    <span class="dd-fl">窗帘一</span>
                                    <mu-checkbox v-model="checkbox.value5" uncheck-icon="power_settings_new" @click="open_one()" class="dd-fr open" checked-icon="power_settings_new"></mu-checkbox>
                                </div> 
                                <mu-slider class="demo-slider" :step="2" :max="6" @change="curtain_one_item()" v-model="normal.value5"></mu-slider>
                                <div class="gear dd-clearfix">
                                    <span class="dd-fl">0档</span>
                                    <span class="dd-fr">6档</span>
                                </div>  
                            </mu-col>
                            <mu-col span="10" sm="10" md="10" lg="10" class="light_con_list">
                                <div class="light_info dd-clearfix">
                                    <span class="dd-fl">窗帘二</span>
                                    <mu-checkbox v-model="checkbox.value6" uncheck-icon="power_settings_new" @click="open_two()" class="dd-fr open" checked-icon="power_settings_new"></mu-checkbox>
                                </div>
                                <mu-slider class="demo-slider" :step="2" :max="6" @change="curtain_two_item()" v-model="normal.value6"></mu-slider>
                                <div class="gear dd-clearfix">
                                    <span class="dd-fl">0档</span>
                                    <span class="dd-fr">6档</span>
                                </div>  
                            </mu-col>
                            <mu-col span="10" sm="10" md="10" lg="10" class="light_con_list">
                                <div class="light_info dd-clearfix">
                                    <span class="dd-fl">窗帘三</span>
                                    <mu-checkbox v-model="checkbox.value7" uncheck-icon="power_settings_new" class="dd-fr open" checked-icon="power_settings_new"></mu-checkbox>
                                </div>
                                <mu-slider class="demo-slider" :step="2" :max="6" v-model="normal.value7"></mu-slider>
                                <div class="gear dd-clearfix">
                                    <span class="dd-fl">0档</span>
                                    <span class="dd-fr">6档</span>
                                </div>  
                            </mu-col>
                        </mu-row>
                    </mu-col>
                </mu-row>
            </mu-container>
        </div>
        <div class="back_footer">
            <img src="../assets/image/danger_bottom_bg.png" class="danger_bottom_bg">
            <div class="back_btn dd-fr" v-on:click="back">
                <img src="../assets/image/danger_btn.png">
                <span>返回主页</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            normal: {
                value1: '',
                value2: 2,
                value3: 2,
                value4: 2,
                value5: 2, 
                value6: 2,
                value7: 2,
                value8: 2,
            },
            checkbox: {
                value1: [],
                value2: false,
                value3: false,
                value4: false,
                value5: false,
                value6: false,
                value7: false
            }
        }
    },
    methods:{
        curtain_one_item(){
            var _this = this;
                if(this.normal.value5 == 2) {
                    $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=1&cmd=changePos&value=3",function(){
                        //console.log(10)
                    })
                }else if(this.normal.value5 == 4) {
                    $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=1&cmd=changePos&value=1",function(){
                        //console.log(20)
                    })
                }else if(this.normal.value5 == 6) {
                    $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=1&cmd=off",function(){
                        //console.log(30)
                        _this.checkbox.value5 = true
                    })
                }else if (this.normal.value5 == 0) {
                    $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=1&cmd=on",function(){
                        //console.log(30)
                        _this.checkbox.value5 = false
                    })
                }
        },
        open_one(){
            var _this = this;
            if(this.checkbox.value5 == true) {
                $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=1&cmd=off",function(){
                        //console.log(10)
                        _this.normal.value5 = 6
                })
            }else {
                $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=1&cmd=on",function(){
                        //console.log(10)
                        _this.normal.value5 = 0
                })
            }
        },
        curtain_two_item(){
            if(this.normal.value6 == 2) {
                $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=2&cmd=changePos&value=1",function(){
                    //console.log(10)
                })
            }else if(this.normal.value6 == 4) {
                $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=2&cmd=changePos&value=3",function(){
                    //console.log(20)
                })
            }else if(this.normal.value6 == 6) {
                $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=2&cmd=changePos&value=6",function(){
                    //console.log(30)
                    this.checkbox.value6 = true
                })
            }else if (this.normal.value6 == 0) {
                $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=1&cmd=off",function(){
                    //console.log(30)
                    this.checkbox.value6 = false
                })
            }
        },
        open_two(){
            var _this = this;
            if(this.checkbox.value6 == true) {
                $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=2&cmd=on",function(){
                        //console.log(10)
                         _this.normal.value6 = 6
                })
            }else {
                $.get("http://192.168.0.104:9090/api?mod=control&device=curtain&id=2&cmd=off",function(){
                        //console.log(10)
                         _this.normal.value6 = 0
                })
            }
        },
        back(){
            this.$router.go(-1);//返回上一层
        },
    },
}
</script>

<style lang="scss">

//主题
@import '~@/assets/style/theme/default.scss';
//样式
@import '~@/assets/style/style.scss';

@import '//fonts.useso.com/css?family=Roboto:300,400,500,700,400italic';
@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';

</style>